<template>
	<view class="detial">
		<view class="titles">{{activityInfo.title}}</view>
		<view class="guiZeBox">
			<view class="titleBox">活动规则</view>
			<view class="listBox">
				<view class="lines">
					<view class="img">
						<image src="../../static/image/time.png" mode=""></image>
					</view>
					<view class="texts">
						<text>活动开始:</text>
						<text>{{activityInfo.start_time}}</text>
					</view>
				</view>
				<view class="lines">
					<view class="img">
						<image src="../../static/image/time.png" mode=""></image>
					</view>
					<view class="texts">
						<text>活动结束:</text>
						<text>{{activityInfo.end_time}}</text>
					</view>
				</view>
				<view class="lines">
					<view class="img">
						<image src="../../static/image/time.png" mode=""></image>
					</view>
					<view class="texts">
						<text>投票结果倒计时:</text>
						<text>投票已结束</text>
					</view>
				</view>
				<view class="lines">
					<view class="img">
						<image src="../../static/image/jingao.png" mode=""></image>
					</view>
					<view class="texts">
						<text>活动规则:</text>
						<text>{{activityInfo.rules}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="guiZeBox xianqging">
			<view class="titleBox">活动详情</view>
			<view class="textArea" v-html="activityInfo.content"></view>
		</view>
	</view>
</template>

<script>
	import {getProjectList,userLoginH5,activityDetial} from '../../request/api.js'
	export default {
		data() {
			return {
				// 活动id
				activity_id:14,
				// 活动内容
				activityInfo:{},
			};
		},
		methods:{
			// 获取活动详情
			getactivityDetial(){
				let obj = {
					id:this.activity_id
				};
				activityDetial(obj).then(res=>{
					console.log(res);
					let picarr = res.data.picarr.split(',');
					this.activityInfo = res.data;
					this.activityInfo.picarr = picarr;
				})
			},
		},
		onLoad() {
			this.activity_id = uni.getStorageSync('activity_id');
			this.getactivityDetial()
		}
	}
</script>

<style scoped lang="less">
.detial{
	width: 100%;
	min-height: 100vh;
	padding: 83rpx 28rpx 37rpx 28rpx;
	box-sizing: border-box;
	.titles{
		width: 560rpx;
		height: auto;
		font-size: 38rpx;
		color: #1D1D1D;
		line-height: 60rpx;
		margin: 0 auto;
		text-align: center;
		font-weight: bold;
	}
	.guiZeBox{
		width: 100%;
		height: auto;
		border-radius: 18rpx;
		overflow: hidden;
		margin-top: 21rpx;
		.titleBox{
			width: 100%;
			height: 76rpx;
			background-color: #255EB2;
			text-align: center;
			line-height: 76rpx;
			color: #fff;
			font-size: 31rpx;
			font-weight: bold;
		}
		.listBox{
			width: 100%;
			height: auto;
			padding: 50rpx 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			.lines{
				width: 100%;
				height: auto;
				display: flex;
				align-items: flex-start;
				margin-bottom: 20rpx;
				&:last-child{
					margin-bottom: 0;
				}
				.img{
					width: 22rpx;
					height: 22rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.texts{
					display: flex;
					align-items: flex-start;
					margin-left: 20rpx;
					flex: 1;
					text{
						&:nth-child(1){
							font-size: 24rpx;
							color: #1E1E1E;
							font-weight: bold;
							flex: none;
						}
						&:nth-child(2){
							font-size: 24rpx;
							color: #1E1E1E;
						}
					}
				}
			}
		}
		.textArea{
			width: 100%;
			height: auto;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			font-size: 24rpx;
			color: #1E1E1E;
			line-height: 40rpx;
		}
	}
}
</style>
